<template>
  <div class="Videoclip">
    <span class="span1" :class="show==0?'p':''" @click="getspan1">视频</span>
    <span class="span2" :class="show==1?'p':''" @click="getspan2">MV</span>
    <div style="overflow: auto;height:640px;width: 1300px;">
      <router-view />
    </div>

  </div>
</template>

<script>
export default {
  name: 'Videoclip',
  data() {
    return {
      show: 0
    }
  },
  methods: {
    getspan1() {
      this.show = 0
    },
    getspan2() {
      this.show = 1
    }
  }
}
</script>

<style lang="less" scoped>
.Videoclip {
  margin-left: 30px;
  margin-top: 30px;

  font-size: 17px;
  .span1 {
    margin-right: 30px;
    opacity: 0.8;
  }
  .span2 {
    opacity: 0.8;
  }
  .p {
    font-size: 20px;
    font-weight: 800;
    opacity: 1;
  }
  .span1:hover {
    cursor: pointer;
    opacity: 1;
  }
  .span2:hover {
    cursor: pointer;
    opacity: 1;
  }
}
</style>